<div ng-show="locationEditing">
    <a style="float: right; margin-right: 30px;" ng-trim="true" href="javascript:;" ng-click="switchLocationList();">
        <i class="icon-reply"></i> 返回规则列表
    </a>
    <h5 style="margin-top: 30px">规则基本信息</h5>

    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-4 control-label no-padding-right">匹配类型</label>

            <div class="col-sm-7">
                <select ng-model="locationEditing.matchType" ng-enter="addLocation()">
                    <option value="prefix">prefix</option>
                    <option value="regex">regex</option>
                    <option value="common">common</option>
                    <option value="exact">exact</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right">路径/正则表达式</label>

            <div class="col-sm-7">
                <input ng-model="locationEditing.pattern" ng-trim="true" ng-enter="addLocation()" type="text"
                       class="input input-xxlarge"
                       placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label no-padding-right"></label>

            <div class="col-sm-7">
                <label class="checkbox inline"> <input ng-model="locationEditing.caseSensitive" type="checkbox">
                    大小写敏感
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label no-padding-right"></label>

            <div class="col-sm-7">
                <label class="checkbox inline">
                    HTTPS类型
                </label>
                <select ng-model="locationEditing.httpsType">
                    <option value="1">HTTP,HTTPS</option>
                    <option value="2">强制HTTP</option>
                    <option value="3">强制HTTPS</option>
                </select>
            </div>
        </div>
    </form>
    <br> <a style="float: right; margin-right: 30px;" ng-click="openAddDirectiveModal();" href="javascript:;"> <i
        class="icon-plus"></i> 添加新指令
</a>
    <h5 style="margin-top: 0px; margin-bottom: 20px">指令列表</h5>
    <table class="table table-bordered" style="width: 100%">
        <thead>
        <tr>
            <th>指令类型</th>
            <th>指令详细参数</th>
            <th style="width: 130px;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="directive in locationEditing.directives" ng-init="inputs = getInputs(directive.type)"
            ng-model="switch">
            <td>{{directive.type}}</td>
            <td ng-hide="switch"><span ng-repeat="(name, value) in directive.dynamicAttributes"
                                       ng-init="input = inputs[name]"> {{ name }}="{{directive.dynamicAttributes[name]}}" &nbsp;</span>
            </td>
            <td ng-show="switch">
                <div class="dropdown" style="float: right; margin-right: 10px">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 增加属性<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li ng-repeat="(name, value) in inputs"><a ng-click="addDynamicAttribute(directive,name)"
                                                                   tabindex="-1" href="javascript:void(0)"><i
                                class="icon-plus"></i> 添加 {{ name }}</a></li>
                    </ul>
                </div>
                <form class="form-horizontal" style="margin: 0 auto; width: 80%">
                    <div class="form-group" ng-repeat="(name, value) in directive.dynamicAttributes"
                         ng-init="input = inputs[name]">
                        <label class="col-sm-4 control-label no-padding-right" for="">{{ name }}</label>

                        <div class="col-sm-7">
                            <input ng-trim="true" ng-show="input.inputType == 'TEXT'"
                                   ng-model="directive.dynamicAttributes[name]"
                                   type="text"> <select style="width:200px"
                                                        ng-class="{'chosen-select':(input.name == 'pool-name')}"
                                                        ng-show="input.inputType == 'SELECT'"
                                                        ng-model="directive.dynamicAttributes[name]"
                                                        ng-options="value0 for value0 in getValueList(input)">
                            <option value="">-- 选择 --</option>
                        </select> &nbsp; <a style="margin-left: 10px;" href="javascript:void(0);"
                                            ng-click="removeDynamicAttribute(directive,name)"><i
                                class="icon-remove"></i></a>
                        </div>
                    </div>
                </form>
            </td>
            <td ng-init="switch=1"><a href="javascript:void(0);" ng-click="switch=(switch+1)%2"><i ng-hide="switch"
                                                                                                   class="icon-edit"></i><i
                    ng-show="switch" class="icon-reply"></i></a>&nbsp;<a style="margin-left: 10px;"
                                                                         href="javascript:void(0);"
                                                                         ng-click="affirmRemoveDirectiveModal($index)"><i
                    class="icon-remove"></i></a></td>
        </tr>
        </tbody>
    </table>
</div>
